<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构--通配【合理】 */
			*{
				font: 16px "楷体";
				/* 去掉内外边距 */
				margin: 0;
				padding: 0;
				/* 无序列表：有样式----“去一个样式 ：列表项”*/
				list-style-type: none;
				/* 无序列表：有样式----【理解：简写】
				去全部样式：list-style-tyle 去列表项样式
				           list-style-position 去列表项标记位置样式
						   list-style-image 去列表项图片标记样式
				*/
				list-style: none;
						
			}
			
			/** 左栏效果
			 * 1.左栏空间区域 【aside】  235*450   背景颜色
			 * 2.左栏区域内容【li】  加权 235*50 相对定位--挂靠点【固定】
			 * 3.给每个区域内容【li】  加鼠标移动上去改背景颜色
			 * 4.左栏弹出框：400*450  1像素边框 绝对定位-钩子  微调
			 */
			
			/* 左栏空间区域 */
			aside{
					width: 265px;
					height: 530px;
					background: #aa55ff;
					margin: 20px 50px;
				}
				aside ul.sidebar li{
					width: 235px;
					height: 50px;
					/* 相对定位---挂靠点 */
					position: relative;
					text-align: left;
					line-height: 50px;
					top: 15px;
					/* 内边距：宽度增加 */
					margin-left: 30px;
				}
				aside ul.sidebar li:hover{
					background:#eee ;
				}
				aside ul.sidebar div.out {
					width: 400px;
					height: 450px;
					border: 1px solid red;
					/* 挂靠位：绝对定位:按照相对定位基点开始定位 */
					position: absolute;
					left: 285px;
					/* 显示与隐藏    JavaScript  【JQuery框架】 */
					display: none;
				}
				/* 新增样式 */
				aside ul.sidebar li span{
					border: 1px solid blue;
					float: right;
					/* 间隙  内边框 */
					padding-right: 50px;
				}
			</style>
			<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构  结构化标记【语义化标签】
		 aside元素 针对：左栏、广告、弹出效果...  有利于SEO优化
		 之前版本通过div+id起别名方式【缺点：繁琐、定义起名】
		 -->
		<aside>
			<ul class="sidebar">
				<!-- 弹出框 -->
				<div class="out"><span>></span></div>
				<li>手机 平板 电话卡<span>></span></li>
				<li>电脑 盒子<span>></span></li>
				<li>路由器 智能硬件<span>></span></li>
				<li>移动电源 插线板<span>></span></li>
				<li>耳机 音箱<span>></span></li>
				<li>电池 存储卡<span>></span></li>
				<li>保护套 后盖<span>></span></li>
				<li>贴膜 其他配件<span>></span></li>
				<li>米兔 服装<span>></span></li>
				<li>箱包 其他周边<span>></span></li>
			</ul>
		</aside>
		<script>
			//左栏弹出与隐藏  .hover事件源+css函数
			//选择器：li
			$("aside ul,sidebar li").hover(function(){
				/* 弹出框默认：隐藏---hover悬停第一件事：显示 */
				$("aside ul.sidebar div.out").css("display","block");
			},function(){
				$("aside ul.sidebar div.out").css("display","none");
			});
		</script>
	</body>
</html>

<!-- 事件源  .hover()      切换效果与css悬停hover一致 
                           语法：.hover(function(){},function(){})
-->